<template>
  <div class="FloatingIconManagement">
    <el-card>
      <div class="sousuo">
        <el-input placeholder="请输入标题" v-model="title">
          <template slot="prepend">名称</template>
        </el-input>
        <el-button class="btn" @click="searchQueryBtn">搜索查询</el-button>
      </div>

      <div class="searchBox">
        <div class="p">
          <p :class="{ active: index == 1 }" @click="activeStatusA()">男用户</p>
          <p :class="{ active: index == 2 }" @click="activeStatusB()">女用户</p>
        </div>
        <div>
          <el-button
            class="btn"
            icon="el-icon-circle-plus-outline"
            @click="dialogVisible = true"
            >新增悬浮窗</el-button
          >
        </div>
      </div>

      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column prop="icon" label="图标">
          <template slot-scope="scope">
            <!-- <img
              :src="scope.row.icon"
              alt
              preview
              v-if="scope.row.icon != ''"
              class="img"
            />
            <img
              src="https://ui-avatars.com/api/?name=无头像&length=3&font-size=0.23"
              alt
              v-else
              class="img"
            /> -->
            <div @click="click(scope.row)">
              <el-upload
                class="avatar-uploader"
                :http-request="upLoad1"
                :show-file-list="false"
                accept="image/png,image/jpg,image/jpeg"
                action
                :on-success="handleAvatarSuccess1"
                :on-preview="handlePictureCardPreview1"
              >
                <img v-if="scope.row.icon" :src="scope.row.icon" class="img" />
                <i v-else class="el-icon-plus avatar-uploader-icon img"></i>
              </el-upload>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="title" label="标题">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.title"
              placeholder="请输入标题"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="jump_url" label="跳转链接">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.jump_url"
              placeholder="跳转链接"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="is_del" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_del"
              class="tableScopeSwitch"
              active-color="#13ce66"
              active-text="正常"
              inactive-color="#ff4949"
              inactive-text="下架"
              active-value="0"
              inactive-value="2"
              @change="changeSwitch1(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column prop="publisher" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="deleteIconBtn(scope.row)"
              >删除</el-button
            >
            <el-button size="mini" @click="confirmIconBtn(scope.row)"
              >更新</el-button
            >
          </template>
        </el-table-column>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="page"
          :limit.sync="pageSize"
          @pagination="getList"
        />
      </el-table>

      <!-- 新增悬浮图标 -->
      <el-dialog title="新增悬浮窗" :visible.sync="dialogVisible" width="30%">
        <div class="addCard">
          <p>
            <span class="moodSpan">图标</span>
            <el-upload
              class="avatar-uploader"
              :http-request="upLoad"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :show-file-list="false"
              action
            >
              <img
                v-if="dialogImageUrl"
                :src="dialogImageUrl"
                class="avatar"
                style="width: 80px; height: 80px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </p>
          <p>
            <span class="moodSpan">文本</span>
            <el-input v-model="text" placeholder="请输入文本"></el-input>
          </p>
          <p>
            <span class="moodSpan">跳转链接</span>
            <el-input v-model="url" placeholder="请输入跳转链接"></el-input>
          </p>
          <p>
            <span class="moodSpan">展示用户</span>
            <el-radio v-model="sex" label="1">男用户</el-radio>
            <el-radio v-model="sex" label="2">女用户</el-radio>
          </p>
          <p>
            <span class="moodSpan">是否开启</span>
            <span class="switch">
              <el-switch
                v-model="state"
                class="tableScopeSwitch"
                active-color="#13ce66"
                active-text="正常"
                inactive-color="#ff4949"
                inactive-text="下架"
                active-value="0"
                inactive-value="2"
                @change="changeSwitch(scope.row)"
              >
              </el-switch>
            </span>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="floatingiconAddBtn"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  floatingiconList,
  floatingiconDel,
  floatingiconEdit,
  floatingiconAdd,
} from "@/api/operationManagement";
import Pagination from "@/components/Pagination"; // 分页
import { client } from "@/utils/oss.js";
import { ossToken } from "@/api/NotificationManagement";

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      loading: true,
      index: 1,
      tableData: [],
      text: "",
      url: "",
      sex: "",
      state: "",
      dialogVisible: false,
      dialogImageUrl: "",
      img: "",
      title: "",

      total: 0,
      page: 1, //页码
      pageSize: 30, //每页条数
      targetObj: {},
    };
  },
  methods: {
    //图片上传
    click(obj) {
      this.targetObj = obj;
    },
    handleAvatarSuccess1(res, file) {
      //   console.log(URL.createObjectURL(file.raw));
      this.targetObj.icon = URL.createObjectURL(file.raw);
    },
    //覆盖默认的上传行为，自定义上传的实现
    async upLoad1(file, obj) {
      console.log(obj);
      await ossToken({
        type: 0,
      }).then((res) => {
        if (res.code == 0) {
          this.dataObj = {
            accessKeyId: res.data.accessKey,
            accessKeySecret: res.data.accessSecret,
            securityToken: res.data.token,
            region: "oss-" + res.data.regionId,
            bucket: res.data.bucket,
          };
        }
      });
      const self = this;
      try {
        let fileNames =
          "/img/" +
          Math.round(new Date() / 1000) +
          "." +
          file.file.name.substring(file.file.name.lastIndexOf(".") + 1);
        this.targetObj.upIcon = fileNames;
        //fileNames上传文件的名称
        //file.file上传文件的内容
        let cli = client(this.dataObj);
        console.log(fileNames);
        console.log(file);
        let result = cli.multipartUpload(fileNames, file.file);
        self.$message({
          message: "上传成功",
          type: "success",
        });
      } catch (e) {
        self.$message.error("上传失败");
      }
    },
    handlePictureCardPreview1(file, obj) {
      console.log(obj);
      this.dialogImageUrl = file.url;
      this.dialogImageUrlB = file.url;
    },
    //列表
    floatingiconList() {
      this.loading = true;
      floatingiconList({
        page: this.page,
        pageSize: this.pageSize,
        sex: this.index, //男用户 女用户
        title: this.title,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    //搜索查询
    searchQueryBtn() {
      this.page = 1;
      this.loading = true;

      floatingiconList({
        page: this.page,
        pageSize: this.pageSize,
        // type: this.index, //男用户 女用户
        sex: this.index, //男用户 女用户
        title: this.title,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    //删除
    deleteIconBtn(row) {
      this.$confirm("此操作将删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          floatingiconDel({
            id: row.id,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              // this.reload();

              this.floatingiconList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //更新编辑
    confirmIconBtn(row) {
      floatingiconEdit({
        id: row.id,
        icon: row.upIcon ? row.upIcon : row.icon,
        title: row.title,
        jump_url: row.jump_url,
        is_del: row.is_del,
        sex: row.sex,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          // this.reload();
          this.floatingiconList();
        }
      });
    },
    //添加悬浮窗
    floatingiconAddBtn() {
      if (
        this.img == "" ||
        this.text == "" ||
        this.url == "" ||
        this.sex == ""
      ) {
        this.$message({
          type: "error",
          message: "提交内容有空项，请检查后重新提交！",
        });
        return;
      }
      floatingiconAdd({
        icon: this.img,
        title: this.text,
        jump_url: this.url,
        is_del: this.state,
        sex: this.sex, //男用户 女用户
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          // this.reload();
          this.dialogVisible = false;
          this.floatingiconList();
        }
      });
    },
    //男用户
    activeStatusA() {
      this.index = 1;
      this.page = 1;
      this.loading = true;

      floatingiconList({
        page: this.page,
        pageSize: this.pageSize,
        sex: this.index, //男用户
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    //女用户
    activeStatusB() {
      this.index = 2;
      this.page = 1;
      this.loading = true;

      floatingiconList({
        page: this.page,
        pageSize: this.pageSize,
        sex: this.index, //女用户
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    // 状态切换更新
    changeSwitch1(row) {
      // console.log(row);
      this.confirmIconBtn(row);
    },
    //分页
    getList() {
      this.floatingiconList();
    },
    //上传图片
    handleAvatarSuccess(res, file) {
      this.dialogImageUrl = URL.createObjectURL(file.raw);
    },
    //覆盖默认的上传行为，自定义上传的实现
    async upLoad(file) {
      await ossToken({
        type: 0,
      }).then((res) => {
        if (res.code == 0) {
          this.dataObj = {
            accessKeyId: res.data.accessKey,
            accessKeySecret: res.data.accessSecret,
            securityToken: res.data.token,
            region: "oss-" + res.data.regionId,
            bucket: res.data.bucket,
          };
        }
      });
      const self = this;
      try {
        let fileNames =
          "/img/" +
          Math.round(new Date() / 1000) +
          "." +
          file.file.name.substring(file.file.name.lastIndexOf(".") + 1);
        this.img = fileNames;
        let cli = client(this.dataObj);
        let result = cli.multipartUpload(fileNames, file.file);
        self.$message({
          message: "上传成功",
          type: "success",
        });
      } catch (e) {
        self.$message.error("上传失败");
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
    },
  },
  created() {
    this.floatingiconList();
  },
};
</script>

<style lang="less" >
.FloatingIconManagement {
  margin: 30px;
  height: 100%;
  .sousuo {
    display: flex;
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }
  .img {
    width: 70px;
    height: 70px;
    padding: 5px;
    line-height: 60px;
    border: 1px dashed #ccc;
  }
  .searchBox {
    display: flex;
    justify-content: space-between;
    .p {
      display: flex;
      p {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
    .active {
      background-color: #0079fe;
      color: #fff;
      border-radius: 10px;
    }
    .activeB {
      background-color: #0079fe;
      color: #fff;
      border-radius: 10px;
    }
    .el-button {
      margin-left: 20px;
    }
  }
  .tableScopeSwitch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
  }
  /*打开时文字位置设置*/
  .tableScopeSwitch .el-switch__label--right {
    z-index: 1;
    right: 6px; /*不同场景下可能不同，自行调整*/
  }
  /*关闭时文字位置设置*/
  .tableScopeSwitch .el-switch__label--left {
    z-index: 1;
    left: 6px; /*不同场景下可能不同，自行调整*/
  }
  /*显示文字*/
  .tableScopeSwitch .el-switch__label.is-active {
    display: block;
  }
  .tableScopeSwitch.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 60px !important; /*开关按钮的宽度大小*/
  }
  .el-dialog {
    .addCard {
      p {
        display: flex;
        .moodSpan {
          width: 80px;
          line-height: 40px;
        }
        .moodSpanB {
          width: 70px;
          line-height: 40px;
        }
        .el-radio,
        .switch {
          line-height: 40px;
        }
        .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409eff;
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 80px;
          height: 80px;
          line-height: 80px;
          text-align: center;
          border: 1px dashed #d9d9d9;
        }
        .avatar {
          width: 80px;
          height: 80px;
          display: block;
        }
        .tableScopeSwitch .el-switch__label {
          position: absolute;
          display: none;
          color: #fff;
        }
        /*打开时文字位置设置*/
        .tableScopeSwitch .el-switch__label--right {
          z-index: 1;
          right: -10px; /*不同场景下可能不同，自行调整*/
        }
        /*关闭时文字位置设置*/
        .tableScopeSwitch .el-switch__label--left {
          z-index: 1;
          left: 22px; /*不同场景下可能不同，自行调整*/
        }
        /*显示文字*/
        .tableScopeSwitch .el-switch__label.is-active {
          display: block;
        }
        .tableScopeSwitch.el-switch .el-switch__core,
        .el-switch .el-switch__label {
          width: 60px !important; /*开关按钮的宽度大小*/
        }
      }
    }
  }
}
</style>